<template>
  <!-- 数据源 -->
  <div class="data-source">
    <div class="left">
      <el-tabs tab-position="top" v-model="activeName">
        <el-tab-pane label="JSON"> </el-tab-pane>
      </el-tabs>
    </div>
    <div class="right">
      <!-- JSON数据源 -->
      <json-data-source
        class="json-data-source-area"
        v-if="activeName === '0'"
        ref="jsonDataSourceRef"
      ></json-data-source>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import JsonDataSource from "./json-data-source/index.vue";
const activeName = ref("0");
const jsonDataSourceRef = ref(null);
</script>
<style scoped lang="scss">
.data-source {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .right {
    flex: 1;
    // padding-left: 16px;
    display: flex;
    .data-source-list-area {
      width: 100px;
    }
    .son-data-source-area {
      flex: 1;
      width: 100%;
    }
  }
}
</style>
